<!DOCTYPE html>
<!-- saved from url=(0048)http://www.51xuediannao.com/js/jquery/wordCount/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>textarea还剩余字数统计 - 懒人建站 http://www.51xuediannao.com/</title>
    <style type="text/css">
        body,a{ font-size: 14px; color: #555;;}
        .wordCount{ position:relative;width: 600px; }
        .wordCount textarea{ width: 100%; height: 100px;}
        .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}
        .wordCount .word{ color: red; padding: 0 4px;;}
    </style>
</head>
<body>
<h1>textarea还剩余字数统计</h1>

<p>textarea还剩余字数统计，支持复制粘贴的时候统计字数</p>

<div class="wordCount" id="wordCount">
    <textarea placeholder="textarea还剩余字数统计" maxlength="200"></textarea>
    <span class="wordwrap"><var class="word">194</var>/200</span>
</div>


<span id="clock"></span>
<script src="./textarea还剩余字数统计_files/jquery-1.10.2.min.js"></script>
<script>
    $(function(){

        //先选出 textarea 和 统计字数 dom 节点
        var wordCount = $("#wordCount"),
            textArea = wordCount.find("textarea"),
            word = wordCount.find(".word");
        //调用
        statInputNum(textArea,word);

    });
    /*
    * 剩余字数统计
    * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>
    */
    function statInputNum(textArea,numItem) {
        var max = numItem.text(),
            curLength;
        textArea[0].setAttribute("maxlength", max);
        curLength = textArea.val().length;
        numItem.text(max - curLength);
        textArea.on('input propertychange', function () {
            numItem.text(max - $(this).val().length);
        });
    }
</script>


<!--下面只是说明与程序代码无关-->
<div style="width:95%;padding:50px; font-size:14px; line-height:1.75;">
   
    
    <span>我们为您提供-
    <a>大学生假期网上兼职挣点零花钱</a>
    </span>
    <span>懒人建站只收录实用和能提高用户体验的代码</span>
    <span>我们只想解放出你的部分写代码时间来思考更高层次的设计。</span>
</div>


</body></html>